<template>
  <div>
    <div class="">
      <slot name="header"></slot>
    </div>
    <div v-for="item in links" class="text-[#64748b] text-[14px]">
      <div class="text-[#333] font-semibold">{{ item.label }}</div>
      <div
        class="my-4 flex items-center text-[14px]"
        v-for="child in item.children"
      >
        <UIcon class="mx-1 text-[16px]" :name="child.icon"></UIcon>
        <span>{{ child.label }}</span>
      </div>
      <UDivider type="dashed" class="my-5" />
    </div>
    <div class="min-h-10 rounded-lg">广告</div>
  </div>
</template>

<script setup lang="ts" name="Links">
const links = [
  {
    label: 'Community',
    to: '',
    children: [
      {
        label: 'Edit this page',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Star on GitHub',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Chat on Discord',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Become a Sponsor',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
    ],
  },
  {
    label: 'Ecosystem',
    to: '',
    children: [
      {
        label: 'Edit this page',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Star on GitHub',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Chat on Discord',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
      {
        label: 'Become a Sponsor',
        to: '',
        icon: 'i-material-symbols-edit-square-outline',
      },
    ],
  },
]
</script>

<style scoped></style>
